/*
    1.初始化页面，创建右侧图片区域
    2.当控制区域被点击发生的事情
*/

(function () {

    // 创建图片数组
    var arr = [];
    for (var i = 0; i <= 15; i++) {
        arr.push(i + ".png");
    }

    // 我们需要的dom元素
    var rightWrap = document.querySelector(".right-wrapper");
    var leftControl = document.querySelector(".left-control");
    var controlBgImg = document.querySelector(".control-bg-img");
    var controlShowImg = document.querySelector(".control-show-img");

    // 是否游戏结束
    var gameOver = false;

    // 初始化页面
    function initPage() {
        // 在创建元素前，保证容器时空的
        rightWrap.innerHTML = "";


        // 随机记录一张图片名
        var nowImgName = arr[Math.floor(Math.random() * 16)];
        controlShowImg.src = "./images/values/" + nowImgName;

        // 循环创建元素
        for (var i = 0; i < 100; i++) {
            // 记录此时应该拿到数组中的第几项
            var index = i % 15;

            // 当index等于0时，让图片数组乱序
            if (index === 0) {
                arr.sort(function (a, b) {
                    return Math.random() - 0.5;
                })
            }

            // 如果时9的倍数，则使用固定的图片名
            if (i % 9 === 0) {
                _createItem(i, nowImgName);
            } else {
                _createItem(i, arr[index]);
            }
        }



        function _createItem(number, imgName) {
            // 创建一项内容（div标签）
            var div = document.createElement("div");
            div.className = "right-item";

            // 创建序号（span标签）
            var numberSpan = document.createElement("span");
            numberSpan.className = "number";
            numberSpan.innerText = number;
            // 把需要添加进div容器
            div.appendChild(numberSpan);

            // 创建value（span标签）
            var valueSpan = document.createElement("span");
            valueSpan.className = "value";
            // 把valueSpan添加进div容器
            div.appendChild(valueSpan);

            // 创建value里面的img
            var img = document.createElement("img");
            img.src = "./images/values/" + imgName;
            // 把img添加进valueSpan
            valueSpan.appendChild(img);

            // 把div添加进页面
            rightWrap.appendChild(div);
        }
    }

    // 绑定事件
    function bindEvent() {
        // 给控制区域绑定click事件
        leftControl.onclick = function () {
            // 判断游戏是否已经运行过一次，是的话，弹出一个提醒 询问是否重新来一次。如果时第一此则正常运转
            if (gameOver) {
                if (confirm("是否在玩一次")) {

                    // 显示背景图片，隐藏结果图片
                    controlBgImg.style.opacity = "1";
                    controlShowImg.style.opacity = "0";

                    // 将游戏状态为false
                    gameOver = false;

                    // 将过度设为none，让控制区旋转回原位置，重新渲染页面
                    this.style.transition = "none";
                    this.style.transform = "rotate(0deg)";
                    initPage();

                }
            } else {

                leftControl.style.transition = "all 2s";
                // 被点击的时候，让自己旋转1080°
                this.style.transform = "rotate(3600deg)";

                // 当旋转完成之后,把背景图片隐藏，把结果图片显示出来
                this.ontransitionend = function () {
                    controlBgImg.style.opacity = "0";
                    controlShowImg.style.opacity = "1";
                    // 点击之后把游戏状态设置为true
                    gameOver = true;

                }
            }
        };
    }


    // 入口函数
    function init() {
        // 1.初始化页面
        initPage();

        // 2.绑定事件
        bindEvent();
    }
    init();
}())